<template>
	<div class="cif-array">
		<el-collapse v-model="active">
			<el-collapse-item :name="props.data.name">
				<template #title>
					<div class="cif-array-title">
						{{ props.data.displayName }}
						<el-icon
							style="
								float: right;
								margin-top: 17px;
								font-size: 16px;
								margin-right: -210px;
								cursor: pointer;
								border-color: green;
								color: green;
							"
							@click.stop="handleAddClick">
							<Edit />
						</el-icon>
						<el-icon
							class="el-icon-delete"
							style="
								float: right;
								margin-top: 17px;
								font-size: 16px;
								margin-right: -235px;
								cursor: pointer;
								border-color: red;
								color: red;
							"
							@click.stop="handleDelClick">
							<Delete />
						</el-icon>
					</div>
				</template>
				<el-tabs v-model="activeDataSeriesTab">
					<el-tab-pane
						v-for="(item, index0) in valueList"
						:key="index0"
						:label="`${item.displayName}`"
						:name="`${index0 + 1}`">
						<div v-for="(cpnt, index1) in item.value" :key="cpnt.type + index1">
							<component
								:is="cpntMaps[cpnt.type.replace(/( |^)[a-z]/, (L: any) => `My${L.toUpperCase()}`)]"
								:data="cpnt"
								:arrayName="data.name"
								:childName="item.name"
								@handleValueChange="() => handleValueChange()" />
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
// import { findConfigDataByName } from '@CIF/Utils/reduce-config';
import _ from 'lodash';
import MyInput from './Input.vue';
import MyNumber from './Number.vue';
import MySelect from './Select.vue';
import MyRange from './Range.vue';
import MyRadio from './Radio.vue';
import MyBoolean from './Boolean.vue';
import MyCheckbox from './Checkbox.vue';
import MyCallback from './Callback.vue';
import MyColor from './Color.vue';
import MyImageBox from './ImageBox.vue';
// import MyArray from "./Array.vue"
// import MyModel from "./Model.vue"
import MyTextBox from './TextBox.vue';

// const configuration: any = inject('configuration');
const cpntMaps: any = {
	MySelect,
	MyInput,
	MyBoolean,
	MyTextBox,
	MyImageBox,
	MyCallback,
	MyNumber,
	MyCheckbox,
	MyRadio,
	MyRange,
	MyColor
};
const props = defineProps({
	data: {
		type: Object,
		default() {
			return {};
		}
	}
});

const emit = defineEmits(['handleValueChange']);
const valueList = ref(props.data.value);
const config = ref(props.data.config || {});
const active = ref([props.data.name]);
const activeDataSeriesTab = ref<string>(valueList.value.length?.toString() || '0');
const maxLen = ref(0);
watch(
	() => props.data,
	(nv) => {
		valueList.value = nv.value;
		// 更新maxLen的值，始终维持最大值
		valueList.value.forEach((el: any) => {
			let n = el.name.replace(/[^0-9]/gi, '') * 1;
			maxLen.value = n > maxLen.value ? n : maxLen.value;
		});
	},
	{ immediate: true }
);

function handleAddClick() {
	if (_.get(window, 'cif.config.logger.enable', false) === true) {
		console.log('CIF.CC.CCT.C.Array:handleAddClick');
	}
	++maxLen.value;
	const temp = _.cloneDeep(config.value.template);
	temp.name = `${temp.name}${maxLen.value}`;
	temp.displayName = `${temp.displayName}${maxLen.value}`;
	valueList.value.splice(valueList.value.length || 0, 0, temp);
	// this.$set(this.value, this.activeDataSeriesTab, temp)
	//在configData中加入新的数据对象
	// let data = findConfigDataByName(this.configData, this.data.name)
	// data.value.push(temp);
}

function handleDelClick() {
	let active = Number(activeDataSeriesTab.value) - 1;
	//如果删除至顶部时，需要瞄准下一个第一位的编号
	activeDataSeriesTab.value = active === 0 ? '1' : active.toString();
	// delete value.value[active];
	valueList.value.splice(activeDataSeriesTab.value, 1);
	// //在configData中删除数据对象
	// let data = findConfigDataByName(this.configData, this.data.name)
	// data.value.pop();
}

function handleValueChange() {
	// 级联调用，调用更外部的handleValueChange，会触发整体刷新
	emit('handleValueChange');
}

onMounted(() => {});
defineExpose({});
</script>

<style lang="scss" scoped>
.cif-array {
	position: relative;
	/* margin-bottom: 10px; */
	&-folder {
		padding: 6px;
		&-title {
			margin-bottom: 10px;
		}
	}
	&-title {
		padding: 6px;

		i:hover {
			background-color: rgba(90, 93, 94, 0.61);
		}
	}
	::v-deep .el-collapse-item__content {
		padding: 0;
	}
	:deep(.el-collapse) {
		--el-collapse-header-bg-color: var(--transparent);
		--el-collapse-header-text-color: var(--white);
		--el-collapse-content-bg-color: var(--transparent);
		--el-collapse-content-text-color: var(--white);
	}
}
</style>
